<template>
  <!-- 顶部搜索 -->
  <div class="search-box">
    <el-form :inline="true" label-width="130px" size="mini" label-suffix=":">
      <div class="showMoreSearchButton" @click="switchShowMoreSearchState" v-if="searchData.length > 2">
        {{ showMoreSearch ? '展开' : '收起' }}
      </div>
      <el-row :class="{ showMoreSearch: showMoreSearch }">
        <el-col
          :xl="8"
          :lg="8"
          :sm="24"
          style="display: flex; flex-flow: row nowrap"
          v-for="(item, index) in searchData"
          :key="index"
        >
          <el-form-item :label="item.label" class="el-date-item">
            <el-date-picker
              v-if="item.type === 'date'"
              clearable
              :type="item.typeName || 'datetimerange'"
              @change="changeOrderTime(item.modelName, item.startTimeName, item.endTimeName)"
              :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
              :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="queryParam[item.modelName]"
            ></el-date-picker>
            <el-autocomplete
              clearable
              v-else-if="item.type === 'auto-input'"
              class="inline-input"
              v-model="queryParam[item.modelName]"
              :fetch-suggestions="
                (querystring, cb) => {
                  querySearch(querystring, cb, item)
                }
              "
              :trigger-on-focus="item.onFocus"
              placeholder="请输入"
              @select="changeSelect($event, item)"
            ></el-autocomplete>
            <div v-else-if="item.type === 'range'" class="range">
              <el-input clearable :placeholder="item.placeholder" v-model="queryParam[item.modelName]"></el-input>至
              <el-input clearable :placeholder="item.placeholder" v-model="queryParam[item.modelName2]"></el-input>元
            </div>
            <el-input
              v-else-if="item.type === 'input'"
              clearable
              :placeholder="item.placeholder"
              v-model="queryParam[item.modelName]"
            ></el-input>

            <el-select
              v-else-if="item.type === 'select'"
              clearable
              filterable
              :remote="item.remote || false"
              :reserve-keyword="item.reKeyword || false"
              :multiple="item.multiple || false"
              :remote-method="item.remoteMethod"
              :disabled="item.disabled"
              v-model="queryParam[item.modelName]"
              :placeholder="item.placeholder"
              @change="changeSelect($event, item)"
              @clear="clearSelect(item)"
              @visible-change="visibleChange($event, item)"
            >
              <el-option
                v-for="option in item.optionData"
                :label="option[item.optionDataLabel] || option.value"
                :value="option[item.optionDataValue] || option.id"
                :key="option.id"
              ></el-option>
            </el-select>
            <!-- cascader -->
            <el-cascader
              clearable
              v-else-if="item.type === 'cascader'"
              v-model="queryParam[item.modelName]"
              :options="item.optionData"
              :props="item.props"
              :collapse-tags="item.collapseTags"
              :show-all-levels="item.showAll"
              @change="changeSelect($event, item)"
            ></el-cascader>
            <div class="other" v-else-if="item.type === 'other'">
              <el-select clearable v-model="queryParam.condition[item.index][item.key]" placeholder="请选择">
                <el-option
                  v-for="option in item.keyOptionData"
                  :label="option.value"
                  :value="option.id"
                  :key="option.id"
                ></el-option>
              </el-select>
              <el-select
                clearable
                v-model="queryParam.condition[item.index][item.op]"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in item.opOptionData"
                  :label="option.value"
                  :value="option.id"
                  :key="option.id"
                ></el-option>
              </el-select>
              <el-input
                clearable
                :placeholder="item.placeholder"
                v-model="queryParam.condition[item.index][item.value]"
                class="input-with-select"
              ></el-input>
              <i class="el-icon-error deleteOtherBtn" @click="deleteOtherItem(index, item.index)"></i>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg="24" :md="24" :sm="24" style="text-align: center">
          <slot name="btn"></slot>
        </el-col>
      </el-row>
    </el-form>
    <slot name="other"></slot>
  </div>
</template>
<script>
export default {
  // name: 'SEARCHCOM',
  data: () => {
    return {}
  },
  props: {
    showMoreSearch: { type: Boolean },
    searchData: { type: Array, required: true },
    queryParam: { type: Object, required: true },
  },
  mounted() { },
  methods: {
    switchShowMoreSearchState() {
      this.$emit('switchShowMoreSearchState')
    },
    changeOrderTime(modelName, startTimeName, endTimeName) {
      this.$emit('changeOrderTime', modelName, startTimeName, endTimeName)
    },
    changeSelect(e, item) {
      this.$emit('changeSelect', e, item)
    },
    clearSelect(item) {
      this.$emit('clearSelect', item)
    },
    visibleChange(e, item) {
      this.$emit('visibleChange', e, item)
    },
    deleteOtherItem(e, item) {
      this.$emit('deleteOtherItem', e, item)
    },
    querySearch(queryString, cb, item) {
      console.log('querySearch', queryString, cb, item)
      this.$emit('querySearch', queryString, cb, item)
    },
  },
}
</script>
<style  scoped>
.search-box {
  position: relative;
  border: 1px dashed rgba(0, 0, 0, 0.4);
  padding: 10px;
}
.search-box .el-input,
.search-box .el-date-editor--datetimerange.el-input,
.search-box .el-date-editor--datetimerange.el-input__inner,
.search-box .el-select,
.search-box .el-cascader,
.search-box .el-autocomplete,
.search-box .el-range-editor {
  width: 100%;
}
.range .el-input {
  width: calc((100% - 50px) / 2);
  height: 28px;
}
.search-box >>> .el-date-item .el-form-item__content {
  width: calc(100% - 130px);
  height: 28px;
}
.other {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.other:hover .deleteOtherBtn {
  display: inline-block;
}
.other .el-select {
  width: 33% !important;
}

.other .el-input {
  width: 33% !important;
}
.other .deleteOtherBtn {
  position: absolute;
  right: 0px;
  top: 0px;
  display: none;
}
.search-box .el-form-item {
  margin-bottom: 10px;
  width: 100%;
}
.showMoreSearchButton {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #409eff;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  z-index: 22;
}
.showMoreSearch .el-col:nth-child(n + 3) {
  display: none !important;
}
</style>
